<!-- 商品列表 -->
<template>
    <div>
        <Title title="商品列表" />
    </div>
    <el-table v-if="tableData.length > 0" :data="tableData" :border="parentBorder" :preserve-expanded-content="preserveExpanded"
        style="width: 100%">
        <el-table-column type="expand">
            <!--  #default="props" 通过插槽获得子组件的传来props -->
            <template #default="props">
                <div m="2" class="show-box">
                    <p m="t-0 b-2">商品id: {{ props.row.id }}</p>
                    <p m="t-0 b-2">商品名: {{ props.row.name }}</p>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="name" />
        <el-table-column label="商品分类" prop="category" />
        <el-table-column label="商品价格" prop="price" />
        <el-table-column label="商品图片" >
            <template #default="scope">
                <img :src="baseUrl+scope.row.imgUrl" alt="" class="goods-img" />
            </template>
        </el-table-column>
        <el-table-column label="商品描述" prop="goodsDesc" />
        <el-table-column label="操作">
            <template #default="scope">
                <el-button size="small" @click="editGood(scope.row)" >
                    编辑
                </el-button>
                <el-button size="small" type="danger" @click="open(scope.row.id)">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="pagination">
            <Pagination   :total="total" @changePage="changePage" />
        </div>
</template>

<script setup>
import Title from '@/views/home/component/Title.vue';
import Pagination from '@/views/home/component/Pagination.vue';
import {getGoodsList,deleteGoods} from '@/api/goods.js';
import { ref } from 'vue';
import { baseUrl } from "@/utile/commen.js"
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';
const router = useRouter();

const currentPageNomer = ref(1);
const pageSizeNomer = ref(5);
const total = ref(0);
const tableData = ref([]);

const parentBorder = ref(false)
const preserveExpanded = ref(false)

// const handleEdit = (index: number, row: User) => {
//     console.log(index, row)
// }
// const handleDelete = (index: number, row: User) => {
//     console.log(index, row)
// }

//获取商品列表
const changePage = async(currentPage,pageSize)=>{
    const res = await getGoodsList({currentPage, pageSize});
    currentPageNomer.value = currentPage;
    pageSizeNomer.value = pageSize;
    total.value = res.total;
    tableData.value = res.data;
    console.log(tableData);
}
changePage(currentPageNomer.value,pageSizeNomer.value);

//删除商品
const open=(id)=>{
    ElMessageBox.confirm(
        '确定要删除吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
    .then(async() => {
        const {code,msg} = await deleteGoods({id});
        if(code === 0){
            ElMessage.success(msg);
            //刷新
            changePage(currentPageNomer.value,pageSizeNomer.value);
        }else{
            ElMessage.error(msg);
        }
    })
    .catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除',
        })
    })
}


//修改商品
const editGood = (row) =>{
    //跳转到修改页面
    //param:页面刷新 数据丢失
    // 传递当前行的数据 query 传参 页面刷新数据不丢失
    router.push(
        {
            path:'/goodsEdit',
            query:row
        }
    );
    console.log(router)
}



</script>

<style scoped>
/* .list-box{
    width: 100%;
    height: 100%;
} */

.show-box {
    /* width: 100%;
    height: 100%; */
    display: flex;
    /* justify-content: space-between; */
}

.show-box p {
    flex: 1
}

.pagination {
    margin-top: 20px;
}
.goods-img {
  width: 50px;
  height: 50px;
}
</style>